<!DOCTYPE html>
<html layout:decorator="fragments/layout" th:with="index='good',son='category'" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:layout="http://www.thymeleaf.org/" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <title>品类管理</title>
    <style>
        .tag [data-role="remove"]::after {
            content: "x";
            padding: 0px 2px;
        }

        .tag [data-role="remove"] {
            margin-left: 8px;
            cursor: pointer;
        }

        .tag {
            margin-right: 5px;
        }

        .table-bordered > tbody > tr > td {
            border: 0px;
        }

        table.dataTable thead th {
            border: 0px;
        }

        table.dataTable.no-footer {
            border: 0px;
        }
    </style>


    <link rel="stylesheet" th:href="@{/css/ztree/metroStyle.css}"/>
</head>
<body>
<div layout:fragment="modal">
    <div class="modal right fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
         aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span></button>
                    <h4 class="modal-title">属性组</h4>
                    <div class="modal-title" style="color: #999999">常用的属性值管理</div>
                </div>
                <div class="modal-body">
                    <div class="box-body">
                        <div class="row">
                            <div class="tableTitle pull-left" style="font-size: 14px">基础信息</div>
                        </div>

                        <div class="row" style="padding-top: 10px">
                            <div class="col-sm-8">
                                <div class="form-group">
                                    <input class="form-control" id="a-name">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="tableTitle pull-left" style="font-size: 14px">属性值列表</div>
                        </div>
                        <div class="row" style="padding-top: 10px">
                            <div class="col-sm-8">
                                <div class="form-group">
                                    <input class="form-control" id="a-name">
                                </div>
                            </div>
                            <div class="col-sm-1">
                                <div class="form-group">
                                    <button class="btn btn-primary">添加</button>
                                </div>
                            </div>
                        </div>


                        <div class="row">
                            <div class="col-sm-12">
                                <div class="col-sm-12"
                                     style="height: 40px;line-height: 40px;border-bottom: 1px solid rgba(0,0,0,0.1)">
                                    <div class="form-group" style="font-size: 14px">
                                        <div class="col-sm-4">
                                            <div>参数</div>
                                        </div>
                                        <div class="col-sm-5">
                                        </div>
                                        <div class="col-sm-3">
                                            <a>排序</a>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-12">
                                <div class="col-sm-12"
                                     style="height: 40px;line-height: 40px;border-bottom: 1px solid rgba(0,0,0,0.1)">
                                    <div class="form-group" style="font-size: 14px">
                                        <div class="col-sm-4">
                                            <div>属性组名称</div>
                                        </div>
                                        <div class="col-sm-5">
                                        </div>
                                        <div class="col-sm-3">
                                            <a>删除</a>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-12">
                                <div class="col-sm-12"
                                     style="height: 40px;line-height: 40px;border-bottom: 1px solid rgba(0,0,0,0.1)">
                                    <div class="form-group" style="font-size: 14px">
                                        <div class="col-sm-4">
                                            <div>属性组名称</div>
                                        </div>
                                        <div class="col-sm-5">
                                        </div>
                                        <div class="col-sm-3">
                                            <a>删除</a>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-12">
                                <div class="col-sm-12"
                                     style="height: 40px;line-height: 40px;border-bottom: 1px solid rgba(0,0,0,0.1)">
                                    <div class="form-group" style="font-size: 14px">
                                        <div class="col-sm-4">
                                            <div>属性组名称</div>
                                        </div>
                                        <div class="col-sm-5">
                                        </div>
                                        <div class="col-sm-3">
                                            <a>删除</a>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-12">
                                <div class="col-sm-12"
                                     style="height: 40px;line-height: 40px;border-bottom: 1px solid rgba(0,0,0,0.1)">
                                    <div class="form-group" style="font-size: 14px">
                                        <div class="col-sm-4">
                                            <div>属性组名称</div>
                                        </div>
                                        <div class="col-sm-5">
                                        </div>
                                        <div class="col-sm-3">
                                            <a>删除</a>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-12">
                                <div class="col-sm-12"
                                     style="height: 40px;line-height: 40px;border-bottom: 1px solid rgba(0,0,0,0.1)">
                                    <div class="form-group" style="font-size: 14px">
                                        <div class="col-sm-4">
                                            <div>属性组名称</div>
                                        </div>
                                        <div class="col-sm-5">
                                        </div>
                                        <div class="col-sm-3">
                                            <a>删除</a>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>


                    </div>
                </div>
                <div class="modal-footer">
                    <button class=" btn btn-default">取消</button>
                    <button class=" btn btn-primary ">确认</button>
                </div>
            </div>
        </div>
        <!-- end 弹出层 moda -->
    </div>
</div>
<div layout:fragment="content">
    <section class="content">
        <div class="col-sm-3" style="border: 1px solid rgba(0, 0, 0, 0.1);min-height: 600px">
            <div class="box-header row" style="border-bottom: 1px solid rgba(0, 0, 0, 0.1)">
                <h4 class="modal-title pull-left">分类列表</h4>
                <button class="btn btn-primary pull-right btn-xs">添加分类</button>
            </div>
            <div class="box-body">
                <div class="form-group">
                    <div class="col-sm-12">
                        <ul id="treeDemo" class="ztree">
                        </ul>
                    </div>
                </div>
            </div>
        </div>


        <div class="col-sm-9" style="border: 1px solid rgba(0, 0, 0, 0.1);min-height: 600px">
            <div class="box-header">
                <div class="col-sm-6" style="padding-left: 0px">
                    <ul id="myTab" class="nav nav-tabs nav-justified">
                        <li id="category-detail" class="active" style="border: 2px">
                            <a href="#tab-category-detail" data-toggle="tab" style="font-size: 14px">基本信息</a></li>
                        <li id="category-group" class="disabled"><a href="#tab-category-group" data-toggle="tab"
                                                                    style="font-size: 14px" onshow="tab">类目属性组</a></li>
                        <li id="high-setting" class="disabled"><a href="#tab-high-setting" data-toggle="tab"
                                                                  style="font-size: 14px" onshow="tab">高级设置</a></li>

                    </ul>
                </div>
            </div>

            <div id="myTabContent" class="tab-content">
                <!--基础信息-->
                <div class="tab-pane fade in active" id="tab-category-detail">
                    <div class="modal-body">
                        <div class="box-body">
                            <div class="row">
                                <div class="tableTitle pull-left" style="font-size: 14px">基础信息</div>
                                <button class="btn btn-primary pull-right">保存</button>
                                <button class="btn btn-default pull-right" style="margin-right: 20px">取消</button>
                            </div>
                            <div class="row" style="padding-top: 10px">
                                <div class="col-sm-4">
                                    <div class="form-group">
                                        <label>父节点</label>
                                        <select class="form-control" id="a-category1">
                                            <option value="">食品</option>
                                            <option value="0">电器</option>
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div class="row" style="padding-top: 10px">
                                <div class="col-sm-4">
                                    <div class="form-group">
                                        <label>名称</label>
                                        <input class="form-control" id="a-name">
                                    </div>
                                </div>
                            </div>

                            <div class="row" style="padding-top: 10px">
                                <div class="col-sm-8">
                                    <div class="form-group">
                                        <label>品类简介</label>
                                        <textarea class="form-control" id="a-name"></textarea>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-sm-12">
                                    <div style="padding-top: 10px">
                                        logo
                                    </div>
                                    <img style="width: 100px;height: 100px"
                                         src="http://placehold.it/100x100/e6e6e6/e6e6e6">
                                    <i class="fa   fa-cloud-upload" style="font-size: 20px"></i>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
                <!--品类信息-->
                <div class="tab-pane fade" id="tab-category-group">
                    <div class="modal-body">
                        <div class="box-body">
                            <div class="row">
                                <div class="tableTitle pull-left" style="font-size: 14px">属性组</div>
                            </div>

                            <div class="row" style="padding-top: 10px">
                                <div class="col-sm-4">
                                    <div class="form-group">
                                        <input class="form-control" id="a-name">
                                    </div>
                                </div>
                                <div class="col-sm-1">
                                    <div class="form-group">
                                        <button class="btn btn-primary">添加</button>
                                    </div>
                                </div>
                            </div>


                            <div class="row" style="padding-top: 10px">
                                <div class="col-sm-12">
                                    <div class="col-sm-12"
                                         style="height: 40px;background-color: #d9d9d9;border: 1px solid rgba(0,0,0,0.1)">
                                        <div class="form-group">
                                            <div class="col-sm-3">
                                                <div style="font-size: 16px;line-height: 40px">属性组名称</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-sm-12">
                                    <div class="col-sm-12"
                                         style="height: 40px;line-height: 40px;border-bottom: 1px solid rgba(0,0,0,0.1)">
                                        <div class="form-group" style="font-size: 14px">
                                            <div class="col-sm-3">
                                                <div>属性组名称</div>
                                            </div>
                                            <div class="col-sm-6">
                                            </div>
                                            <div class="col-sm-3">
                                                <a>删除</a>
                                                <a style="padding-left: 10px" data-toggle="modal"
                                                   data-target="#myModal">修改</a>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-12">
                                    <div class="col-sm-12"
                                         style="height: 40px;line-height: 40px;border-bottom: 1px solid rgba(0,0,0,0.1)">
                                        <div class="form-group" style="font-size: 14px">
                                            <div class="col-sm-3">
                                                <div>属性组名称</div>
                                            </div>
                                            <div class="col-sm-6">
                                            </div>
                                            <div class="col-sm-3">
                                                <a>删除</a>
                                                <a style="padding-left: 10px">修改</a>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-12">
                                    <div class="col-sm-12"
                                         style="height: 40px;line-height: 40px;border-bottom: 1px solid rgba(0,0,0,0.1)">
                                        <div class="form-group" style="font-size: 14px">
                                            <div class="col-sm-3">
                                                <div>属性组名称</div>
                                            </div>
                                            <div class="col-sm-6">
                                            </div>
                                            <div class="col-sm-3">
                                                <a>删除</a>
                                                <a style="padding-left: 10px">修改</a>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-12">
                                    <div class="col-sm-12"
                                         style="height: 40px;line-height: 40px;border-bottom: 1px solid rgba(0,0,0,0.1)">
                                        <div class="form-group" style="font-size: 14px">
                                            <div class="col-sm-3">
                                                <div>属性组名称</div>
                                            </div>
                                            <div class="col-sm-6">
                                            </div>
                                            <div class="col-sm-3">
                                                <a>删除</a>
                                                <a style="padding-left: 10px">修改</a>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-12">
                                    <div class="col-sm-12"
                                         style="height: 40px;line-height: 40px;border-bottom: 1px solid rgba(0,0,0,0.1)">
                                        <div class="form-group" style="font-size: 14px">
                                            <div class="col-sm-3">
                                                <div>属性组名称</div>
                                            </div>
                                            <div class="col-sm-6">
                                            </div>
                                            <div class="col-sm-3">
                                                <a>删除</a>
                                                <a style="padding-left: 10px">修改</a>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </div>


                        </div>
                    </div>
                </div>
                <!--高级设置-->
                <div class="tab-pane fade" id="tab-high-setting">
                    <div class="modal-body">
                        <div class="box-body">
                            <div class="row">
                                <div class="tableTitle pull-left" style="font-size: 14px">设置分类广告</div>
                                <button class="btn btn-primary pull-right">保存</button>
                                <button class="btn btn-default pull-right" style="margin-right: 20px">取消</button>
                            </div>

                            <div class="row">
                                <div class="col-sm-12">
                                    <label style="padding-top: 10px">
                                        广告图片
                                    </label>
                                </div>
                                <div class="col-sm-12">
                                <img style="width: 100px;height: 100px"
                                     src="http://placehold.it/100x100/e6e6e6/e6e6e6">
                                <i class="fa   fa-cloud-upload" style="font-size: 20px"></i>
                                </div>
                            </div>
                            <div class="row" style="padding-top: 10px">
                                <div class="col-sm-4">
                                    <div class="form-group">
                                        <label>跳转设置</label>
                                        <input class="form-control" id="a-name">
                                    </div>
                                </div>
                                <div class="col-sm-1">
                                    <div class="form-group">
                                        <label style="visibility: hidden">品牌</label>
                                        <div>
                                            <i class="fa   fa-plus-square"  data-toggle="control-sidebar" style="font-size: 34px"></i>
                                        </div>
                                    </div>


                                </div>
                            </div>




                        </div>
                    </div>

                </div>
            </div>


        </div>
    </section>

</div>

<div layout:fragment="js">
    <script type="text/javascript" th:src="@{~/js/ztree/jquery.ztree.all.min.js}"></script>
    <script>
        var setting = {
            check: {
                enable: true
            },
            data: {
                simpleData: {
                    enable: true
                }
            },
            async: {
                enable: true,
                url: "/admins/rolePermissions",
                type: "get",//默认post
                otherParam: {"roleId": "1"},
            },
            view: {showIcon: false}
        };

        setting.check.chkboxType = {"Y": "ps", "N": "ps"};

        var zNodes = [];
        $(document).ready(function () {
            var treeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
            $('#role-table tbody').on('click', 'tr button.delete', function (e) {
                e.preventDefault();
                var role = $(this).attr('role-data');
                var roleId = $(this).attr('data');
                swal({
                    title: "删除该编号【" + role + "】的权限组",
                    text: "",
                    type: "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#5ECD1E",
                    confirmButtonText: "Yes, 确定",
                    cancelButtonText: "No, 取消",
                    closeOnConfirm: true,
                    closeOnCancel: true
                }, function (isConfirm) {
                    if (isConfirm) {
                        $.ajax({
                            url: "/admins/roles/" + roleId,
                            type: "delete",
                            dataType: "json",
                            success: function (data) {
                                if (data.code == 200) {
                                    toastr.success("删除成功");
                                    location.reload(true)
                                } else {
                                    toastr.error(data.msg);
                                }
                            }
                        });
                    }
                });
            });

            $('#role-table').find('tbody').on('click', 'tr button.modify', function (e) {
                e.preventDefault();
                var role = $(this).attr('role-data');
                var roleId = $(this).attr('data');
                var description = $(this).attr('d-data');

                console.log("roleId:" + roleId);
                $('#c-role-id').val(roleId);
                $('#c-role').val(role);
                $('#c-description').val(description);

                treeObj.setting.async.otherParam = [];
                treeObj.setting.async.otherParam = {"roleId": roleId};
                treeObj.reAsyncChildNodes(null, "refresh");
                $('#createModalAdd').html("更新")
                $('.modal-title').html("更新权限组【" + description + "】");
                $('#createModal').modal("show");
            });

            $('#addRole').on('click', function (e) {
                e.preventDefault();
                $('#c-role-id').val(0);
                treeObj.setting.async.otherParam = [];
                treeObj.setting.async.otherParam = {"roleId": 0};
                treeObj.reAsyncChildNodes(null, "refresh");
                $('#createModalAdd').html("添加")
                $('.modal-title').html("添加权限组");

                $('#createModal').modal("show");
            })

            var checked = [];

            $('#createModal').on('show.bs.modal', function (e) {
                checked = [];
            })

            $('#createModalAdd').on('click', function (e) {
                e.preventDefault();
                var role = $('#c-role').val();
                var description = $('#c-description').val();
                var roleId = $('#c-role-id').val();

                if (isNull(description)) {
                    toastr.error("权限组名称不能为空");
                    return;
                }
                if (isNull(role)) {
                    toastr.error("权限组编号不能为空");
                    return;
                }

                var nodes = treeObj.getCheckedNodes(true);

                $.each(nodes, function (i, val) {
                    var index = checked.indexOf(val.id);
                    if (index < 0) {
                        //如果找不到 则添加
                        checked.push(val.id);
                    }
                });

                $.ajax({
                    url: "/admins/rolePermissions",
                    type: "post",
                    data: "roleId=" + roleId + "&role=" + role + "&description=" + description + "&pids=" + checked.join(","),
                    dataType: "json",
                    success: function (data) {
                        if (data.code == 200) {
                            $('#createModal').modal("toggle");
                            if (roleId == 0 || roleId == '0') {
                                toastr.success("添加成功");
                            } else {
                                toastr.success("更新成功");
                            }
                            location.reload(true)
                        } else {
                            toastr.error(data.msg);
                        }
                    }
                });

//                console.log(JSON.stringify(checked));
            })
        })
    </script>


</div>
</body>
</html>
